<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0 ,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>结算页面</title>
    <link rel="shortcut icon" href="img/foodie.ico"/>

    <link href="AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css"/>
    <link href="basic/css/demo.css" rel="stylesheet" type="text/css"/>
    <link href="css/cartstyle.css" rel="stylesheet" type="text/css"/>
    <link href="css/jsstyle.css" rel="stylesheet" type="text/css"/>
    <link href="css/lee.css" rel="stylesheet" type="text/css"/>

    <script type="text/javascript" src="js/address.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.9/dist/vue.js"></script>
    <script src="js/axios.min.js"></script>
</head>

<body>
<div id="pay">
    <!--顶部导航条 -->
    <div class="am-container header">
        <ul class="message-l">
            <div class="topMessage">
                <div class="menu-hd" v-show="!userIsLogin">
                    <a href="login.html" target="_top" class="h">亲，请登录</a>
                    <a href="register.html" target="_top">免费注册</a>
                </div>
                <div class="menu-hd" v-show="userIsLogin">
                    <span style="color: #d2364c">欢迎，{{userInfo.username}}</span>
                </div>
            </div>
        </ul>
        <ul class="message-r">
            <div class="topMessage home">
                <div class="menu-hd"><a href="index.html" target="_top" class="h">商城首页</a></div>
            </div>
            <div class="topMessage my-shangcheng">
                <div class="menu-hd MyShangcheng"><a href="javascript:void(0);" @click="goUserCenter">
                    <i class="am-icon-user am-icon-fw"></i>个人中心</a></div>
            </div>
        </ul>
    </div>

    <!--悬浮搜索框-->
    <div class="nav white">
        <!-- <div class="logo"><img src="images/logo.png" /></div> -->
        <div class="logoBig">
            <li><img src="images/logobig.png"/></li>
        </div>

        <div class="search-bar pr">
            <a name="index_none_header_sysc" href="#"></a>
            <form>
                <input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索"
                       autocomplete="off">
                <input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="submit">
            </form>
        </div>
    </div>

    <div class="clear"></div>
    <div class="concent">
        <!--地址 -->
        <div class="paycont">
            <div class="address">
                <h3>确认收货地址 </h3>
                <div class="control">
                    <div class="tc-btn createAddr theme-login am-btn am-btn-danger">使用新地址</div>
                </div>
                <div class="clear"></div>
                <ul>
						<span v-show="addressList.length > 0">
							<!-- <block v-for="(address, aindex) in addressList" :key="aindex">
								<div class="per-border"></div> -->
                            <!-- <li class="user-addresslist " v-for="(address, aindex) in addressList" :key="aindex" style="margin-top: 6px;"> -->
							<li :class="['user-addresslist', {'defaultAddr' : address.id == choosedAddressId}]"
                                v-for="(address, aindex) in addressList"
                                :key="aindex"
                                @click="chooseAddress(address.id)"
                                style="margin-top: 6px;">
								<!-- <li :class="['user-addresslist', {'DefaultAddr' : address.isDefault == 1}]"> -->

								<div class="address-left">
									<!-- background: url(../images/peraddbg.png)no-repeat scroll 0% 0%; -->
                                    <!-- :style="address.isDefault == 1 ? " -->
									<div class="user DefaultAddr">

										<span class="buy-address-detail">
											<span class="buy-user">{{address.receiver}}</span>
											<span class="buy-phone">{{address.mobile}}</span>
										</span>
									</div>
									<div class="default-address DefaultAddr">
										<span class="buy-line-title buy-line-title-type">收货地址：</span>
										<span class="buy--address-detail">
											<span class="province">{{address.province}}</span>
											<span class="city">{{address.city}}</span>
											<span class="dist">{{address.district}}</span>
											<span class="street">{{address.detail}}</span>
										</span>
									</div>
									<ins class="deftip" v-show="address.isDefault == 1">默认地址</ins>
								</div>
								<div class="address-right">
									<a href="person/address.html">
										<span class="am-icon-angle-right am-icon-lg"></span></a>
								</div>
								<div class="clear"></div>

								<div class="new-addr-btn">
									<a href="javascript:void(0);" @click.stop="setDefaultAddress(address.id)"
                                       :class="[{'hidden' : address.id == defaultAddressId}]">设为默认</a>
									<span :class="['new-addr-bar', {'hidden' : address.id == defaultAddressId}]">|</span>
									<a href="javascript:void(0);" @click.stop="editAddress(address.id)">编辑</a>
									<span class="new-addr-bar">|</span>
									<a href="javascript:void(0);" @click.stop="deleteAddress(address.id)">删除</a>
								</div>
							</li>
                            <!-- </block> -->
						</span>

                </ul>

                <div class="clear"></div>
            </div>

            <!--支付方式-->
            <div class="logistics">
                <h3>选择支付方式</h3>
                <ul class="pay-list">
                    <li class="" @click="choosePayMethod(1)" style="width: 180px;height:40px;padding:3px;"><img
                            src="img/wxpay.png"/><span></span></li>
                    <!-- <li class="pay qq" @click="choosePayMethod(1)"><img src="images/weizhifu.jpg"/>微信<span></span></li> -->
                    <!-- <li class="pay taobao" @click="choosePayMethod(2)"><img src="images/zhifubao.jpg"/>支付宝<span></span></li> -->
                    <li class="" @click="choosePayMethod(2)" style="width: 180px;height:40px;padding:3px;"><img
                            src="img/alipay.png"/><span></span></li>
                </ul>
            </div>
            <div class="clear"></div>

            <!--订单 -->
            <div class="concent">
                <div id="payTable">
                    <h3>确认订单信息</h3>
                    <div class="cart-table-th">
                        <div class="wp">

                            <div class="th th-item">
                                <div class="td-inner">商品信息</div>
                            </div>
                            <div class="th th-price">
                                <div class="td-inner">单价</div>
                            </div>
                            <div class="th th-amount">
                                <div class="td-inner">数量</div>
                            </div>
                            <div class="th th-sum">
                                <div class="td-inner">金额</div>
                            </div>
                            <div class="th th-oplist">
                                <div class="td-inner">配送方式</div>
                            </div>

                        </div>
                    </div>
                    <div class="clear"></div>

                    <tr class="item-list">
                        <div class="bundle  bundle-last" v-for="(orderItem, index) in orderItemList">

                            <div class="bundle-main">
                                <ul class="item-content clearfix">
                                    <div class="pay-phone">
                                        <li class="td td-item">
                                            <div class="item-pic">
                                                <a :href="'item.html?itemId=' + orderItem.itemId" target="_blank"
                                                   class="J_MakePoint">
                                                    <img :src="orderItem.itemImgUrl" class="itempic J_ItemImg"
                                                         style="width: 80px;height: 80px"></a>
                                            </div>
                                            <div class="item-info">
                                                <div class="item-basic-info">
                                                    <a :href="'item.html?itemId=' + orderItem.itemId" target="_blank"
                                                       class="item-title J_MakePoint"
                                                       data-point="tbcart.8.11">{{orderItem.itemName}}</a>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="td td-info">
                                            <div class="item-props">
                                                <span class="sku-line">规格：{{orderItem.specName}}</span>
                                            </div>
                                        </li>
                                        <li class="td td-price">
                                            <div class="item-price price-promo-promo">
                                                <div class="price-content">
                                                    <em
                                                            class="J_Price price-now">{{orderItem.priceDiscount /
                                                        100}}</em>
                                                </div>
                                            </div>
                                        </li>
                                    </div>
                                    <li class="td td-amount">
                                        <div class="amount-wrapper ">
                                            <div class="item-amount ">
                                                <span class="phone-title">购买数量</span>
                                                <div class="sl">
                                                    {{orderItem.buyCounts}}
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="td td-sum">
                                        <div class="td-inner">
                                            <em tabindex="0"
                                                class="J_ItemSum number">{{orderItem.priceDiscount * orderItem.buyCounts
                                                / 100}}</em>
                                        </div>
                                    </li>
                                    <li class="td td-oplist">
                                        <div class="td-inner">
                                            <span class="phone-title">配送方式</span>
                                            <div class="pay-logis">
                                                包邮
                                            </div>
                                        </div>
                                    </li>

                                </ul>
                                <div class="clear"></div>
                            </div>
                        </div>
                    </tr>
                    <div class="clear"></div>
                </div>

            </div>
            <div class="clear"></div>
            <div class="pay-total">
                <!--留言-->
                <div class="order-extra">
                    <div class="order-user-info">
                        <div id="holyshit257" class="memo">
                            <label>买家留言：</label>
                            <input v-model="orderRemarker" type="text" title="选填, 可写备注" placeholder="选填, 可写备注"
                                   class="memo-input J_MakePoint c2c-text-default memo-close">
                            <div class="msg hidden J-msg">
                                <p class="error">最多输入500个字符</p>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="clear"></div>
            </div>
            <!--含运费小计 -->
            <div class="buy-point-discharge ">
                <p class="price g_price ">
                    合计（包邮）
                    <!-- <span>¥</span> -->
                    <em class="pay-sum">¥{{totalAmount / 100}}</em>
                </p>
            </div>

            <!--信息 -->
            <div class="order-go clearfix">
                <div class="pay-confirm clearfix">
                    <div class="box">
                        <div tabindex="0" id="holyshit267" class="realPay"><em class="t">实付款：</em>
                            <span class="price g_price ">
									<!-- <span>¥</span>  -->
									<em class="style-large-bold-red " id="J_ActualFee">¥{{totalAmount / 100}}</em>
								</span>
                        </div>

                        <div id="holyshit268" class="pay-address">

                            <p class="buy-footer-address">
                                <span class="buy-line-title buy-line-title-type">寄送至：</span>
                                <span class="buy--address-detail">
										<span class="province">{{confirmAddress.province}}</span>
										<span class="city">{{confirmAddress.city}}</span>
										<span class="dist">{{confirmAddress.district}}</span>
										<span class="street">{{confirmAddress.detail}}</span>
									</span>
                            </p>
                            <p class="buy-footer-address">
                                <span class="buy-line-title">收货人：</span>
                                <span class="buy-address-detail">
										<span class="buy-user">{{confirmAddress.receiver}}</span>
										<span class="buy-phone">{{confirmAddress.mobile}}</span>
									</span>
                            </p>
                        </div>
                    </div>

                    <div id="holyshit269" class="submitOrder">
                        <div class="go-btn-wrap">
                            <a id="J_Go"
                               href="javascript:void(0);"
                               @click="submitOrder"
                               class="btn-go"
                               tabindex="0"
                               title="点击此按钮，提交订单">提交订单</a>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
        </div>

        <div class="clear"></div>
    </div>
    <!-- </div> -->
    <div class="footer ">
        <div class="footer-hd ">
            <p>
                <a href="https://www.imooc.com/" target="_blank">慕课网</a>
                <b>|</b>
                <a href="https://coding.imooc.com/class/217.html" target="_blank">分布式架构仿抖音短视频</a>
                <b>|</b>
                <a href="https://coding.imooc.com/class/261.html" target="_blank">Netty仿微信聊天</a>
                <b>|</b>
                <a href="https://coding.imooc.com/class/201.html" target="_blank">Zookeeper与dubbo入门</a>
                <b>|</b>
                <a href="https://coding.imooc.com/class/293.html" target="_blank">支付宝小程序</a>
            </p>
        </div>
        <div class="footer-bd ">
            <p>
                <em>© 2019 imooc.com 京ICP备12003892号-11 北京奥鹏文化传媒有限公司 版权所有</em>
            </p>
        </div>
    </div>
    <!-- </div> -->
    <div class="theme-popover-mask"></div>
    <div class="theme-popover">

        <!--标题 -->
        <div class="am-cf am-padding">
            <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">新增地址</strong> / <small>Add
                address</small></div>
        </div>
        <hr/>

        <div class="am-u-md-12">
            <form class="am-form am-form-horizontal">
                <div class="am-form-group">
                    <label for="user-name" class="am-form-label">收货人</label>
                    <div class="am-form-content">
                        <input type="text" id="user-name" placeholder="收货人" v-model="receiver" maxlength="12">
                    </div>
                </div>

                <div class="am-form-group">
                    <label for="user-phone" class="am-form-label">手机号码</label>
                    <div class="am-form-content">
                        <input id="user-phone" placeholder="手机号必填" v-model="mobile" maxlength="11">
                    </div>
                </div>

                <div class="am-form-group">
                    <label for="user-phone" class="am-form-label">所在地</label>
                    <div id="example" class="am-form-content address">
                        <select v-model="prov">
                            <option v-for="option in arr" :value="option.name">{{ option.name }}</option>
                        </select>
                        <select v-model="city">
                            <option v-for="option in cityArr" :value="option.name">{{ option.name }}</option>
                        </select>
                        <select v-model="district" v-if="district">
                            <option v-for="option in districtArr" :value="option.name">{{ option.name }}</option>
                        </select>
                    </div>
                </div>

                <div class="am-form-group">
                    <label for="user-intro" class="am-form-label">详细地址</label>
                    <div class="am-form-content">
							<textarea class="" rows="3" id="user-intro" placeholder="输入详细地址"
                                      v-model="detail"></textarea>
                        <small>100字以内写出你的详细地址...</small>
                    </div>
                </div>

                <div class="am-form-group theme-poptit">
                    <div class="am-u-sm-9 am-u-sm-push-3">
                        <div class="am-btn am-btn-danger" @click="saveNewAddressOrUpdate">保存</div>
                        <div class="am-btn am-btn-danger close" @click="closeAddressDialog">取消</div>
                    </div>
                </div>
            </form>
        </div>

        <!-- <input type="hidden" id="hiddenOrderId" :value="orderId"/>
        <a href="" id="alipayLink" target="_blank"></a> -->
    </div>

    <div class="clear"></div>
</div>
<script type="text/javascript " src="js/app.js"></script>
<script type="text/javascript " src="js/cities.js"></script>
<script type="text/javascript">
    // $(document).ready(function(){
    // 	$("#alipayLink").one("click",function(){
    // 		var orderId = $("#hiddenOrderId").val();
    // 		debugger;
    // 		window.open('alipayTempTransit.html?orderId='+orderId);
    // 	});
    // });
    var index = new Vue({
        el: "#pay",
        data: {
            userIsLogin: false,
            userInfo: {},

            orderItemList: [], // 订单结算的商品列表
            totalAmount: 0, // 订单总价格

            defaultAddressId: "",	// 默认地址id
            choosedAddressId: "",	// 选中的地址id
            addressList: [],

            updatedAddressId: "",	// 用于更新地址的id，如果为空，新增，如果不为空，修改

            confirmAddress: {},	// 确认地址

            choosedPayMethod: 0,
            orderRemarker: "",		// 用户备注留言

            receiver: "",
            mobile: "",
            province: "",
            // city: "",
            // district: "",
            detail: "",

            orderId: "",
			orderToken: "",

            arr: arrAll,
            prov: '北京',
            city: '北京',
            district: '东城区',
            cityArr: [],
            districtArr: []
        },

        watch: {
            prov: {
                // 表格数据刷新后需清空之前查看的订单详情内容
                handler: function (newVal, oldVal) {
                    this.updateCity();
                    this.updateDistrict();
                },
                deep: true,
            },
            city: {
                // 表格数据刷新后需清空之前查看的订单详情内容
                handler: function (newVal, oldVal) {
                    this.updateDistrict();
                },
                deep: true,
            },

        },

        created() {
            this.updateCity();
            this.updateDistrict();

            // var me = this;
            // 通过cookie判断用户是否登录
            this.judgeUserLoginStatus();

            // 渲染结算订单信息
            this.renderOrderInfoList();

            // 渲染地址信息
            this.renderUserAddressList();

            // 获取订单token
            this.getOrderToken();
        },
        methods: {
            goUserCenter() {
                // 判断用户是否登录
                var userIsLogin = this.userIsLogin;
                if (!userIsLogin) {
                    // 用户未登录，则跳转
                    window.location.href = "login.html?returnUrl=" + app.centerServerUrl;
                } else {
                    window.location.href = app.centerServerUrl;
                }
            },
            // goAlipay() {
            //     window.open("alipayTempTransit.html?orderId=" + this.orderId);
            // },
            choosePayMethod(payMethod) {
                this.choosedPayMethod = payMethod;

            },
            // 提交订单，创建订单
            submitOrder() {
                // 判断提交的商品不能为空
                var orderItemList = this.orderItemList;
                if (orderItemList == null || orderItemList == undefined || orderItemList == '' || orderItemList.length <= 0) {
                    alert("没有商品信息，订单无法提交~！");
                    return;
                }
                // 拼接规格ids
                var itemSpecIds = "";
                for (var i = 0; i < orderItemList.length; i++) {
                    var tmpSpecId = orderItemList[i].specId;
                    itemSpecIds += tmpSpecId;
                    if (i < orderItemList.length - 1) {
                        itemSpecIds += ",";
                    }
                }

                // 判断选中的地址id不能为空
                var choosedAddressId = this.choosedAddressId;
                if (choosedAddressId == null || choosedAddressId == undefined || choosedAddressId == '') {
                    alert("请选择收货地址！");
                    return;
                }

                // 判断支付方式不能为空
                var choosedPayMethod = parseInt(this.choosedPayMethod);
                if (choosedPayMethod != 1 && choosedPayMethod != 2) {
                    alert("请选择支付方式！");
                    return;
                }

                // 幂等性Token
                var orderToken = this.orderToken;

                // var newWindow = window.open();

                // 买家备注可以为空
                var orderRemarker = this.orderRemarker;
                // console.log(orderRemarker);

                var userInfo = this.userInfo;
                var serverUrl = app.serverUrl;
                axios.defaults.withCredentials = true;
                axios.post(
                    serverUrl + '/orders/create',
                    {
                        "userId": userInfo.id,
                        "itemSpecIds": itemSpecIds,
                        "addressId": choosedAddressId,
                        "payMethod": choosedPayMethod,
                        "leftMsg": orderRemarker,
                        "orderToken": orderToken
                    },
                    {
                        headers: {
                            'headerUserId': userInfo.id,
                            'headerUserToken': userInfo.userUniqueToken
                        }
                    })
                    .then(res => {
                        if (res.data.status == 200) {
                            // alert("OK");
                            var orderId = res.data.data;
                            // 判断是否微信还是支付宝支付
                            if (choosedPayMethod == 1) {
                                // 微信支付则跳转到微信支付页面，并且获得支付二维码
                                window.location.href = "wxpay.html?orderId=" + orderId;
                            } else if (choosedPayMethod == 2) {
                                this.orderId = orderId;

                                // 支付宝支付直接跳转
                                window.location.href = "alipay.html?orderId=" + orderId + "&amount=" + this.totalAmount;
                                window.open("alipayTempTransit.html?orderId=" + orderId);
                                // const newWindow = window.open();
                                // 弹出的新窗口进行支付
                                // newWindow.location = "alipayTempTransit.html?orderId=" + orderId;
                                // this.$nextTick(()=> {
                                // 	// 当前页面跳转后会轮训支付结果
                                // 	newWindow.location.href = "alipay.html?orderId=" + orderId;
                                // })
                            } else {
                                alert("目前只支持微信或支付宝支付！");
                            }

                        } else {
                            alert(res.data.msg);
                        }
                    });
            },
            // 编辑地址
            editAddress(addressId) {
                // 获得编辑的地址内容
                var addressList = this.addressList;
                var updateAddress = null;
                for (var i = 0; i < addressList.length; i++) {
                    var tmpAddress = addressList[i];
                    if (tmpAddress.id == addressId) {
                        updateAddress = tmpAddress;
                        break;
                    }
                }

                // 赋值
                this.receiver = updateAddress.receiver;
                this.mobile = updateAddress.mobile;
                this.prov = updateAddress.province;
                this.city = updateAddress.city;
                this.district = updateAddress.district;
                this.detail = updateAddress.detail;

                // 弹出对话框
                this.showAddressDialog();

                // 设置更新地址的id
                this.updatedAddressId = addressId;
            },
            // 弹出对话框
            showAddressDialog() {
                // 禁止遮罩层下面的内容滚动
                $(document.body).css("overflow", "hidden");
                $(this).addClass("selected");
                $(this).parent().addClass("selected");

                $('.theme-popover-mask').show();
                $('.theme-popover-mask').height($(window).height());
                $('.theme-popover').slideDown(200);
            },
            // 删除地址
            deleteAddress(addressId) {
                var isDel = window.confirm("确认删除改地址吗");
                if (!isDel) {
                    return;
                }

                // 如果删除的地址是默认地址或者选中地址，则choosedAddressId和defaultAddressId要设置为空
                if (addressId == this.choosedAddressId) {
                    this.choosedAddressId = "";
                }

                if (addressId == this.defaultAddressId) {
                    this.defaultAddressId = "";
                }

                var userInfo = this.userInfo;
                var serverUrl = app.serverUrl;
                axios.defaults.withCredentials = true;
                axios.post(
                    serverUrl + '/address/delete?userId=' + userInfo.id + "&addressId=" + addressId,
                    {},
                    {
                        headers: {
                            'headerUserId': userInfo.id,
                            'headerUserToken': userInfo.userUniqueToken
                        }
                    })
                    .then(res => {
                        if (res.data.status == 200) {
                            this.renderUserAddressList();
                        } else {
                            alert(res.data.msg);
                        }
                    });
            },
            // 设置默认地址
            setDefaultAddress(addressId) {
                var userInfo = this.userInfo;
                var serverUrl = app.serverUrl;
                axios.defaults.withCredentials = true;
                axios.post(
                    serverUrl + '/address/setDefalut?userId=' + userInfo.id + "&addressId=" + addressId,
                    {},
                    {
                        headers: {
                            'headerUserId': userInfo.id,
                            'headerUserToken': userInfo.userUniqueToken
                        }
                    })
                    .then(res => {
                        if (res.data.status == 200) {
                            this.renderUserAddressList();
                        } else {
                            alert(res.data.msg);
                        }
                    });
            },
            // 选择地址，切换选中效果
            chooseAddress(choosedAddressId) {
                this.choosedAddressId = choosedAddressId;
                // this.defaultAddressId = choosedAddressId;
                // console.log("this.defaultAddressId:" + this.defaultAddressId);
                // console.log("this.choosedAddressId:" + this.choosedAddressId);

                // 确认地址动态改变
                this.renderConfirmAddress(choosedAddressId);
            },
            renderConfirmAddress(addressId) {
                // 提交订单的确认地址要跟着动态改变
                var addressList = this.addressList;
                var confirmAddress = null;
                for (var i = 0; i < addressList.length; i++) {
                    var tmpAddress = addressList[i];
                    if (tmpAddress.id == addressId) {
                        confirmAddress = tmpAddress;
                        break;
                    }
                }
                // 赋值
                this.confirmAddress = confirmAddress;
            },
            updateCity() {
                for (var i in this.arr) {
                    var obj = this.arr[i];
                    if (obj.name == this.prov) {
                        this.cityArr = obj.sub;
                        break;
                    }
                }
                this.city = this.cityArr[1].name;
            },
            updateDistrict() {
                for (var i in this.cityArr) {
                    var obj = this.cityArr[i];
                    if (obj.name == this.city) {
                        this.districtArr = obj.sub;
                        break;
                    }
                }
                if (this.districtArr && this.districtArr.length > 0 && this.districtArr[1].name) {
                    this.district = this.districtArr[1].name;
                } else {
                    this.district = '';
                }
            },
            // 创建用户新地址
            saveNewAddressOrUpdate() {
                var receiver = this.receiver;
                if (receiver == null || receiver == '' || receiver == undefined) {
                    alert("收货人姓名不能为空");
                    return;
                }
                if (receiver.length > 12) {
                    alert("收货人姓名不能太长");
                    return;
                }

                var mobile = this.mobile;
                if (mobile == null || mobile == '' || mobile == undefined) {
                    alert("手机不能为空");
                    return;
                }
                if (mobile.length != 11) {
                    alert("手机号长度为11位");
                    return;
                }
                var checkMobile = app.checkMobile(mobile);
                if (!checkMobile) {
                    alert('请输入有效的手机号码！');
                    return;
                }

                var prov = this.prov;
                var city = this.city;
                var district = this.district;

                var detail = this.detail;
                if (detail == null || detail == '' || detail == undefined) {
                    alert("详细地址不能为空");
                    return;
                }

                // 添加新地址
                var userInfo = this.userInfo;
                var serverUrl = app.serverUrl;
                axios.defaults.withCredentials = true;

                var addressId = this.updatedAddressId;

                // 地址id为空，则新增地址，否则更新地址
                if (addressId == "" || addressId == undefined || addressId == null) {
                    axios.post(
                        serverUrl + '/address/add',
                        {
                            "userId": userInfo.id,
                            "receiver": receiver,
                            "mobile": mobile,
                            "province": prov,
                            "city": city,
                            "district": district,
                            "detail": detail
                        },
                        {
                            headers: {
                                'headerUserId': userInfo.id,
                                'headerUserToken': userInfo.userUniqueToken
                            }
                        })
                        .then(res => {
                            if (res.data.status == 200) {
                                this.closeAddressDialog();
                                this.renderUserAddressList();

                                // 设置更新地址的id为空
                                this.updatedAddressId = "";
                            } else if (res.data.status == 500) {
                                alert(res.data.msg);
                            }
                        });
                } else {
                    axios.post(
                        serverUrl + '/address/update',
                        {
                            "addressId": addressId,
                            "userId": userInfo.id,
                            "receiver": receiver,
                            "mobile": mobile,
                            "province": prov,
                            "city": city,
                            "district": district,
                            "detail": detail
                        },
                        {
                            headers: {
                                'headerUserId': userInfo.id,
                                'headerUserToken': userInfo.userUniqueToken
                            }
                        })
                        .then(res => {
                            if (res.data.status == 200) {
                                this.closeAddressDialog();
                                this.renderUserAddressList();
                            } else if (res.data.status == 500) {
                                alert(res.data.msg);
                            }
                        });
                }

            },
            closeAddressDialog() {
                $(document.body).css("overflow", "visible");
                $('.theme-login').removeClass("selected");
                $('.item-props-can').removeClass("selected");
                $('.theme-popover-mask').hide();
                $('.theme-popover').slideUp(200);

                // 设置更新地址的id为空
                this.updatedAddressId = "";
                this.flushAddressForm();
            },
            renderUserAddressList() {
                var userInfo = this.userInfo;
                // 请求后端获得最新数据
                var serverUrl = app.serverUrl;
                axios.defaults.withCredentials = true;
                axios.post(
                    serverUrl + '/address/list?userId=' + userInfo.id, {},
                    {
                        headers: {
                            'headerUserId': userInfo.id,
                            'headerUserToken': userInfo.userUniqueToken
                        }
                    })
                    .then(res => {
                        if (res.data.status == 200) {
                            var addressList = res.data.data;
                            // console.log(addressList);
                            this.addressList = addressList;

                            // 设置默认应该选中的地址id
                            this.setDefaultChoosedAddressId(addressList);

                            // 清空地址内容
                            this.flushAddressForm();
                        } else if (res.data.status == 500) {
                            alert(res.data.msg);
                            console.log(res.data.msg);
                        } else {
                            alert(res.data.msg);
                            console.log(res.data.msg);
                        }
                    });
            },
            getOrderToken() {
                // 请求后端获得最新数据
                var serverUrl = app.serverUrl;
                axios.defaults.withCredentials = true;
                axios.post(
                    serverUrl + '/orders/getOrderToken')
                    .then(res => {
                        if (res.data.status == 200) {
                            this.orderToken = res.data.data;
                        } else {
                            alert("orderToken 获取失败");
                        }
                    });
            },
            flushAddressForm() {
                this.receiver = "";
                this.mobile = "";
                this.prov = "北京";
                this.city = "北京";
                this.district = "东城区";
                this.detail = "";
                this.updateCity();
                this.updateDistrict();
            },
            setDefaultChoosedAddressId(addressList) {
                var confirmAddress = {};
                for (var i = 0; i < addressList.length; i++) {
                    var address = addressList[i];
                    if (address.isDefault == 1) {
                        this.defaultAddressId = address.id;
                        confirmAddress = address;
                        // 如果当前页面还没有选中的地址，则把默认地址作为选中地址
                        var choosedAddressId = this.choosedAddressId;
                        if (choosedAddressId == null || choosedAddressId == undefined || choosedAddressId == '') {
                            this.choosedAddressId = address.id;
                        }
                        break;
                    }
                }

                // 赋值
                this.confirmAddress = confirmAddress;
            },
            renderOrderInfoList() {
                var selectedItemSpecIds = app.getUrlParam("selectedItemSpecIds");
                if (selectedItemSpecIds == null || selectedItemSpecIds == '' || selectedItemSpecIds ==
                    undefined) {
                    app.goErrorPage();
                }

                var specIdsArray = new Array();
                specIdsArray = selectedItemSpecIds.split(",");

                var orderItemList = [];
                var totalAmount = 0;
                for (var i = 0; i < specIdsArray.length; i++) {
                    var tmpSpecId = specIdsArray[i];
                    var orderItem = this.getItemFromCookieShopcartList(tmpSpecId);
                    orderItemList.push(orderItem);
                    totalAmount += (orderItem.priceDiscount * orderItem.buyCounts);
                }
                // console.log(orderItemList);
                this.orderItemList = orderItemList;
                this.totalAmount = totalAmount;

                if (orderItemList.length <= 0) {
                    alert("没有商品信息，或订单已经提交");
                    window.location.href = "shopcart.html";
                }
            },
            getItemFromCookieShopcartList(specId) {
                var shopcartList = app.getShopcartList();

                if (shopcartList == null || shopcartList == undefined || shopcartList.length == 0) {
                    app.goErrorPage();
                }

                for (var i = 0; i < shopcartList.length; i++) {
                    var tmpSpecId = shopcartList[i].specId;
                    if (tmpSpecId == specId) {
                        return shopcartList[i];
                    }
                }
            },
            // 打开商品详情页面
            showItemDetail(itemId) {
                window.open("item.html?itemId=" + itemId);
            },
            // 通过cookie判断用户是否登录
            judgeUserLoginStatus() {
                var userCookie = app.getCookie("user");
                if (userCookie != null && userCookie != undefined && userCookie != '') {
                    var userInfoStr = decodeURIComponent(userCookie);
                    // console.log(userInfo);
                    if (userInfoStr != null && userInfoStr != undefined && userInfoStr != '') {
                        var userInfo = JSON.parse(userInfoStr);
                        // 判断是否是一个对象
                        if (typeof (userInfo) == "object") {
                            this.userIsLogin = true;
                            // console.log(userInfo);
                            this.userInfo = userInfo;
                        } else {
                            this.userIsLogin = false;
                            this.userInfo = {};
                        }
                    }
                } else {
                    this.userIsLogin = false;
                    this.userInfo = {};
                }
            }
        }
    });
</script>
</body>

</html>